<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改商品')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-goods-edit" th:object="${storeGoods}">
            <input name="goodsId" th:field="*{goodsId}" type="hidden">
            <div class="form-group">
                <label class="col-sm-2 control-label"><span style="color: red; ">*</span>分类：</label>
                <div class="col-sm-10">
                    <div class="input-group">
                        <input id="treeId" name="cateId" type="hidden" th:value="*{cateId}"/>
                        <input  onclick="selectCateTree()" id="treeName" type="text" placeholder="请选择分类" class="form-control" th:value="*{cateName}" required>
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">品牌：</label>
                <div class="col-sm-10">
                    <select class="form-control" name="brandId" id="selectObj2">

                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-2 control-label">商品编号：</label>
                <div class="col-sm-10">
                    <input name="goodsSn" th:field="*{goodsSn}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-2 control-label">商品名称：</label>
                <div class="col-sm-10">
                    <input name="goodsName" th:field="*{goodsName}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品类型：</label>
                <div class="col-sm-10">
                    <select class="form-control" name="goodsType"  onchange="getTpe_item()"  required id="selectObj3">

                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品规格值：</label>
                <div class="col-sm-10">
                    <select class="form-control" name="specType"   onchange="getPostSpec()"  id="selectObj4" required>

                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label"></label>
                <div class="col-sm-10" id="spec_item">

                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品图片组：</label>
                <div class="col-sm-10">
                    <select class="form-control" name="imgId"   required id="selectObj5">

                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品封面</label>
                <div class="col-sm-10">
                    <input name="goodsLogo" id="imgUrl" class="form-control" th:field="*{goodsLogo}" >
                    <input id="fileinput-demo-1" name="file" type="file" multiple>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-2 control-label">市场价(零售价)：</label>
                <div class="col-sm-10">
                    <input name="marketPrice" th:field="*{marketPrice}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">库存：</label>
                <div class="col-sm-10">
                    <input name="storeCount" class="form-control" th:field="*{storeCount}" type="text" required>
                </div>
            </div>

            <div class="form-group">    
                <label class="col-sm-2 control-label">商品关键词：</label>
                <div class="col-sm-10">
                    <input name="keywords" th:field="*{keywords}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品描述：</label>
                <div class="col-sm-10">
                    <textarea name="goodsRemark" class="form-control" required>[[*{goodsRemark}]]</textarea>
                </div>
            </div>
<!--            <div class="form-group">-->
<!--                <label class="col-sm-2 control-label">商品详情：</label>-->
<!--                <div class="col-sm-10">-->
<!--                    <input id="goodsContent" name="goodsContent" th:field="*{goodsContent}" type="hidden">-->
<!--                    <div class="summernote"></div>-->
<!--                </div>-->
<!--            </div>-->
            <div class="form-group">    
                <label class="col-sm-2 control-label">商品排序：</label>
                <div class="col-sm-10">
                    <input name="sort" th:field="*{sort}" class="form-control" type="text" required>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
    <th:block th:include="include :: summernote-css" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <th:block th:include="include :: summernote-js" />
    <script type="text/javascript">
        var prefix = ctx + "shop/goods";
        $("#form-goods-edit").validate({
            focusCleanup: true
        });

        // 选择商品类型 ，触发规格值的数据改变的事件
        function getTpe_item(){
            $('#spec_item').empty();
            $('#selectObj4').empty();
            var typeid=$("#selectObj3").val()
            console.log(typeid);
            //商品规格
            var optionValue4 = 0;
            var optionName4 = '';
            var row4 = null;
            $("#selectObj4").append('<option value="0">----请选择----</option>');
            $.post(prefix + "/ajaxSpec",{type_id:typeid,spec_id:0},function(result){
                var html = '';
                if(result.code == 0){
                    var new_data = result.data.data;
                    console.log(row4)
                    for(var i = 0;i < new_data.length;i++){
                        optionValue4 = new_data[i].id;
                        optionName4 = new_data[i].name;
                        $("#selectObj4").append('<option value="' + optionValue4 + '">' + optionName4 + '</option>');

                    }


                }
            },'json');


        }
        //  规格下拉框信息
        function getPostSpec(){
            var id=$("#selectObj4").val();
            $.post(prefix + "/ajaxSpecItem",{type_id:id},function(result){
                var html = '';
                $('#spec_item').html('');
                if(result.code == 0){
                    var new_data = result.data.data;
                    console.log(new_data);
                    if(new_data.length == 0) $('#spec_item').html('');
                    for(var i = 0;i < new_data.length;i++){
                        html += '<button type="button" data-spec_id="'+new_data[i].specId+'" data-item_id="'+new_data[i].id+'"' +
                            ' class="btn btn-success">'+new_data[i].item+'</button>&nbsp;';
                    }
                    $('#spec_item').append(html);
                    ajaxGetSpecInput();

                }

            },'json');
            //
        }
        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-goods-edit').serialize());
            }
        }

        function selectCateTree() {
            var options = {
                title: '商城商品分类选择',
                width: "380",
                url:  "/shop/cate/selectCateTree/" + $("#treeId").val(),
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        }
        function doSubmit(index, layero){
            var body = layer.getChildFrame('body', index);
            $("#treeId").val(body.find('#treeId').val());
            $("#treeName").val(body.find('#treeName').val());
            layer.close(index);
        }

        //  富文本编辑框内  文件类保存
        $('.summernote').summernote({
            placeholder: '请输入内容',
            height : 192,
            lang : 'zh-CN',
            followingToolbar: false,
            callbacks: {
                onImageUpload: function (files) {
                    sendFile(files[0], this);
                }
            }
        });

        // 上传文件
        function sendFile(file, obj) {
            var data = new FormData();
            data.append("file", file);
            $.ajax({
                type: "POST",
                url: ctx + "common/upload",
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function(result) {
                    if (result.code == web_status.SUCCESS) {
                        $(obj).summernote('editor.insertImage', result.url, result.fileName);
                    } else {
                        $.modal.alertError(result.msg);
                    }
                },
                error: function(error) {
                    $.modal.alertWarning("图片上传失败。");
                }
            });
        }

        $(document).ready(function () {
            $("#fileinput-demo-1").fileinput({
                'theme': 'explorer-fas',
                'uploadUrl': '/common/upload',
                overwriteInitial: false,
                initialPreviewAsData: true,
                initialPreview: [
                    "[[${storeGoods.goodsLogo}]]"
                ]
            });

            $("#fileinput-demo-1").on("fileuploaded", function (event, data, previewId, index) {
                console.log(data.response);
                if(data.response.code == 0){
                    $('#imgUrl').val(data.response.url);
                }
            });



            //品牌
            var options2 = [];
            var selectObj2 = $("#selectObj2");
            var optionValue2 = 0;
            var optionName2 = '';
            var row2 = null;
            var optionStr2 = '';
            var thisBrandId = [[${storeGoods.brandId}]];
            var config2 = {
                url: "/shop/brand/list",
                type: "post",
                dataType: "json",
                data: {pageSize:100},
                success: function(data) {
                    for (var i = 0;i < data.total;i++) {
                        row2 = data.rows[i];
                        optionValue2 = row2.id;
                        optionName2 = row2.brandTitle;
                        if(optionValue2 == thisBrandId){
                            options2.push("<option value="+optionValue2+" selected>"+optionName2+"</option>");
                        }else{
                            options2.push("<option value="+optionValue2+">"+optionName2+"</option>");
                        }
                    }
                    optionStr2 = options2.join('');

                    selectObj2.html(optionStr2);
                }
            };
            $.ajax(config2)

            //商品类型
            var options3 = [];
            var selectObj3 = $("#selectObj3");
            var optionValue3 = 0;
            var optionName3 = '';
            var row3 = null;
            var optionStr3 = '';
            var thisGoodsTypeId = [[${storeGoods.goodsType}]];
            var config3 = {
                url: "/shop/type/list",
                type: "post",
                dataType: "json",
                data: {pageSize:100},
                success: function(data) {
                    for (var i = 0;i < data.total;i++) {
                        row3 = data.rows[i];
                        optionValue3 = row3.id;
                        optionName3 = row3.name;
                        // options3.push("<option value="+optionValue3+">"+optionName3+"</option>");
                        if(optionValue3 == thisGoodsTypeId){
                            options3.push("<option value="+optionValue3+" selected>"+optionName3+"</option>");
                        }else{
                            options3.push("<option value="+optionValue3+">"+optionName3+"</option>");
                        }

                    }
                    optionStr3 = options3.join('');

                    selectObj3.html(optionStr3);
                }
            };
            $.ajax(config3)

            //商品规格项选择
           // getTpe_item();
            $('#spec_item').empty();
            $('#selectObj4').empty();


            var optionValue4 = 0;
            var optionName4 = '';
            var thisGoodsSpecType = [[${storeGoods.goodsType}]];
            var row4 = null;
            $.post(prefix + "/getAjaxSpec",{id:thisGoodsSpecType},function(result){
                var html = '';
                if(result.code == 0){
                    var new_data = result.data.data;
                    console.log(row4)
                    for(var i = 0;i < new_data.length;i++){
                        optionValue4 = new_data[i].id;
                        optionName4 = new_data[i].name;
                        if (thisGoodsSpecType==optionValue4){
                            $("#selectObj4").append('<option value="' + optionValue4 + '" selected>' + optionName4 + '</option>');

                        }else {
                            $("#selectObj4").append('<option value="' + optionValue4 + '">' + optionName4 + '</option>');

                        }

                    }


                }
            },'json');
            //商品图片组
            var options5 = [];
            var selectObj5 = $("#selectObj5");
            var optionValue5 = 0;
            var optionName5 = '';
            var row5 = null;
            var optionStr5 = '';
            var thisGoodsImgId = [[${storeGoods.imgId}]];
            var config5 = {
                url: "/shop/goods_image/lists1",
                type: "post",
                dataType: "json",
                data: {pageSize:100},
                success: function(data) {
                    for (var i = 0;i < data.total;i++) {
                        row5 = data.rows[i];
                        console.log(row5)
                        optionValue5 = row5.img_id;
                        optionName5 = row5.image_name;
                        if(optionValue5 == thisGoodsImgId){
                            options5.push("<option value="+optionValue5+" selected>"+optionName5+"</option>");
                        }else{
                            options5.push("<option value="+optionValue5+">"+optionName5+"</option>");
                        }

                    }
                    optionStr5 = options5.join('');

                    selectObj5.html(optionStr5);
                }
            };
            $.ajax(config5)
        });

    </script>
</body>
</html>